<template>
	<view>
		<tui-grid>
			<block v-for="(v,k) in list" :key="k">
				<!--不支持class-->
				<tui-grid-item cell="4" @click="detail(k)">
					<image v-if="v.typeImg" class="img" :src="'../../static/img/pay-type/'+v.typeImg+'.png'">
					<image v-else class="img" src="../../static/img/pay-type/0.png">
					<text class="tui-grid-label">{{v.typeName}}</text>
				</tui-grid-item>
			</block>
		</tui-grid>
	</view>
</template>

<script>
	import tuiGrid from "@/components/grid/grid"
	import tuiGridItem from '@/components/grid-item/grid-item'
	import common from "../../common/common.js"
	import url from "../../common/url.js"
	
	let self=null;
	export default {
		components: {
			tuiGrid,
			tuiGridItem
		},
		data() {
			return {
				list:[
					{
						typeName:'请求中',
						typeImg:''
					}
				],
			}
		},
		onLoad() {
			self=this
			
			if(common.userInfo===null){
				this.list=[]
				uni.showToast({
				    title: '登陆后可体验所有功能哦！~~',
				    duration: 3000,
					icon:'none'
				})
			}else{
				this.init()
			}
		},
		onTabItemTap(){
			if(common.userInfo!==null){
				this.init();
			}else{
				uni.showToast({
				    title: '登陆后可体验所有功能哦！~~',
				    duration: 3000,
					icon:'none'
				})
			}
		},
		methods: {
			init(){
				common.http({
					url:url.userGetUserPayType,
					data:{key:common.userInfo.key},
					ok(data){
						self.list=data
						uni.hideLoading()
					}
				})
			},
			detail(index){
				uni.navigateTo({
				    url: '../record-number/record-number?pay_type_index='+index
				});
			}
		}
	}
</script>

<style>
	.img{
		width: 64upx;
		height: 64upx;
		padding-left: 45upx;
	}
.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-title {
		padding: 50upx 30upx 30upx 30upx;
		font-size: 32upx;
		color: #333;
		box-sizing: border-box;
		font-weight: bold;
		clear: both;
	}

	.tui-grid-icon {
		width: 64upx;
		height: 64upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}


	

	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 10upx;
	}
	.tui-grid-label-5 {
		margin-top: 0 !important;
		color: #8a5966 !important;
	}
</style>
